

<template>
    <view class="systemMsg">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff;position:fixed;z-index:100;width:750rpx;"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom:none;position:fixed;z-index:100;"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">系统通知</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>
        

        <view class="content" :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }">
            <scroll-view :scroll-y="true"
            class="scr"
            :lower-threshold="100"
            @scrolltolower="loadMore"
            
        >

            <view class="card" v-for="item in list">
                <view class="title d-flex a-center j-between">
                    <view class="d-flex a-center">
                        <userhead width="60" height="60" saveKey="999999999" :src="item.avatar"/>
                        <text class="text">{{item.extension?.title}}</text>
                    </view>
                    <view class="time">
                        {{formatMessageTime1(item.time*1000)}}
                    </view>
                </view>

                <view class="desp">
                   {{item.extension?.content}}
                </view>
            </view>


        </scroll-view>

        </view>

    </view>
</template>

<script setup lang="ts">
import { ref,computed,reactive } from "vue";
import { onReady, onShow, onLoad,onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import {
    getUserProfile
} from "@/hooks/imHooks";
import moment from 'moment'

import { config as configStore } from "@/store/config";
import cacheimg from "@/components/cacheimg.vue";
import userhead from "@/components/userhead.vue";
import sexage from "@/components/sexage.vue";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { imStore } from "@/store/imStore";
import { centToYuan } from "@/utils/format";


import { formatMessageTime1 } from "@/pages/TUIKit/utils/date";

const systemConfig: any = systemConfigStore();
const IM_STORE: any = imStore();


const goBack = () => {
    uni.navigateBack();
};

const formatGender = (str:string)=>{
    if(str==="Gender_Type_Male"){
        return 1
    }
    if(str==="Gender_Type_Famale"){
        return 2
    }
    return 0;

}


const formatBirthday = (b:number)=>{
    const now = moment();
    const birthday = moment(''+b)
    return Math.floor(now.diff(birthday, 'years', true))
}

const loadMore = async () => {
    if (isCompleted.value) {
        return;
    }
    const historyData = await uni.$TUIKit.TUIChatServer.getHistoryMessageList();
    isCompleted.value = historyData.isCompleted;
    const arr = JSON.parse(JSON.stringify(historyData.messageList)); 
    list.value.push(...arr);
};


const formatMsg = (arr) => {




    let list = [];
    arr.forEach(item=>{
        try{
            console.log(item.payload.extension)
            let obj = JSON.parse(item.payload.extension);
            item.extension = obj
            list.push(item)

        }catch(e){
            console.log('eeeeee')
            console.log(e)
            //TODO handle the exception
        }
    })

    return list

}


const recivedNewMsg = async (msg:any)=>{
    const arr = [JSON.parse(JSON.stringify(msg))];
    list.value.unshift(...formatMsg(arr));
}



const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const isCompleted = ref(false);

const list = ref([]);
onReady(() => {
});
onShow(() => {
});

onLoad(async (option: any) => {
    const arr = JSON.parse(JSON.stringify(IM_STORE.messageList))
    list.value = formatMsg(arr.reverse());
    uni.$on('recivedNewMsg',recivedNewMsg)
});

onUnload(() => {
    uni.$off('recivedNewMsg',recivedNewMsg)
    uni.$TUIKit.TUIChatServer.destroyed();
    uni.$TUIKit.TUIConversationServer.setMessageRead(IM_STORE.conversation.conversationID);
});

</script>

<style lang="scss" scoped>




.systemMsg{
    .content{
        position:absolute;
        width:750rpx;
        left:0;
        right:0;
        .card{
            width:710rpx;
            padding:0 20rpx;
            padding-bottom:30rpx;
            background:#fff;
            border-radius: 20rpx;
            margin:0 auto;
            margin-top:20rpx;
            .title{
                height:100rpx;
                border-bottom:1rpx solid #E4E4E4;
                .text{
                    color:#333;
                    font-size:30rpx;
                    font-weight:600;
                    margin-left:25rpx;
                }
                .time{
                    font-size:26rpx;
                    color:#999;
                }
            }

            .desp{
                color:#999;
                font-size:28rpx;
                margin-top:20rpx;
                width:100%;
            }
        }
    }

}
</style>
